<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		body{
			margin: 0;
			background-color: #f0c9cf;
		}
		h3{
			margin: 0;
		}
		main{
			padding:0 10rem;
			min-width: 980px;
		}
		.food-lists{
			margin: 1rem auto;
			background-color: #fff;
		}
		.food-list+.food-list{
			margin-top: 1rem;
		}
		ul{
			list-style: none;
			padding: 0;
		}
		.title,.list,.list>li{
			display: inline-block;
		}
		/* 内容区 */
		.title{
			padding: 1.25rem 2rem;
			color: #fff;
			background-color: #f66;
		}
		.list>li{
			padding:0 2rem;
		}
	</style>
</head>
<body>
	<main>
		<?php foreach ($lists as $list): ?>
		<ul class="food-lists">
			<li class="food-list">
				<h3 class="title" style="background-color: <?=$list["color"]?>;">
					<?=$list["title"]?>
				</h3>
				<ul class="list">
					<?php foreach($list["content"] as $list_item):?>
					<li><?=$list_item?></li>
					<?php endforeach;?>
				</ul>
			</li>
		</ul>
		<?php endforeach;?>
	</main>
</body>
</html>